<script setup lang="ts">
import { treeData, varietyTableColumnList, varietyList } from "@/views/medSupCatalog/mockData.ts";
import { TreeNode } from "@/interface/commonTypes.ts";
import { VarietyTableData } from "@/interface/medSupCatalog.ts";
import { ElTable } from 'element-plus'
import BottomTab from "@/views/medSupCatalog/component/bottomTab.vue";
import { provide, readonly } from 'vue'

defineOptions({
  // 卫材目录管理
  name: 'MedSupCatalog'
})

const defaultProps = {
  children: 'children',
  label: 'label',
}
// 当前选择的树节点
const currentNode = ref(<TreeNode>{});
// 左侧树操作按钮禁用状态
const isNodeDisabled = computed(() => {
  return !currentNode.value.label
})
const handleNodeClick = (data: TreeNode) => {
  console.log(data)
  currentNode.value = data
}

// 将选择的分类数据透传给子孙组件
provide('selectClassify', readonly(currentNode));

const tableData = ref<VarietyTableData[]>(varietyList)

// 当前选择的行数据
const currentRow = ref<VarietyTableData | null>(null)
// 表格的ref对象
const tableRef = ref<InstanceType<typeof ElTable>>()
// 表格操作按钮禁用状态
const isDisabled = computed(() => {
  return !currentRow.value
})

// 将选择的品种行数据透传给子孙组件
// 在 provide 中提供 selectVarietyRow 的类型定义
provide('selectVarietyRow', readonly(currentRow))

const handleCurrentChange = (row: VarietyTableData | null) => {
  currentRow.value = row
  tableRef.value?.setCurrentRow(row)
  console.log(`1当前选择的行:`, row)
}

</script>

<template>
<div class="medSupCatalog w-bgc">
  <el-row class="height-100">
    <el-col :span="7" class="el-height">
      <div class="btn-list">
        <el-button type="primary" plain>新增分类</el-button>
        <el-button type="primary" plain :disabled="isNodeDisabled">修改分类</el-button>
        <el-button type="primary" plain :disabled="isNodeDisabled">删除分类</el-button>
        <el-button type="primary" plain :disabled="isNodeDisabled">启用</el-button>
        <el-button type="danger" plain :disabled="isNodeDisabled">停用</el-button>
      </div>
      <div class="height-100 overflow-auto">
        <el-tree
          default-expand-all
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </div>
    </el-col>
    <el-col :span="17" class="el-height">
      <div class="flex flex-column height-100">
        <div class="topTable">
          <div class="btn-list mb10">
            <el-button type="primary" plain :disabled="isNodeDisabled">新增品种</el-button>
            <el-button type="primary" plain :disabled="isDisabled">修改品种</el-button>
            <el-button type="primary" plain :disabled="isDisabled">删除品种</el-button>
            <el-button type="primary" plain :disabled="isDisabled">启用</el-button>
            <el-button type="danger" plain :disabled="isDisabled">停用</el-button>
          </div>
          <div class="el-height overflow-auto">
            <sTable
              class="width-100"
              :columns="varietyTableColumnList"
              :tableData="tableData"
              :hasPage="true"
              :page="{
              pageNumber: 1,
              pageSize: 10,
              total: 20,
             }"
              @current-change="handleCurrentChange"/>
          </div>
        </div>
        <div class="bottomTable">
          <bottom-tab></bottom-tab>
        </div>
      </div>
    </el-col>
  </el-row>
</div>
</template>

<style scoped lang="scss">
.medSupCatalog {
  height: calc(100% - 32px);
  .topTable, .bottomTable {
    height: 50%;
    //border: 1px solid darkcyan;
  }
  .el-height {
    height: calc(100% - 42px)
  }
}
</style>
